<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '扫一扫',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view>
    <!-- ios扫码速度快于安卓 -->
  </view>
</template>
<script lang="ts" setup>
import { getInfoBarCode } from '@/service/pm-assay';

let barcode = null;

const data = reactive({
  flash: false, // 是否打开摄像头
  title: '扫一扫', // 标题
  tips: '扫码提示', // 要在扫码界面自定义的内容
  light: '轻触照亮', // 手电筒
  album: '相册', // 相册
  cancel: '用户取消选择', // 取消相册选择
  error: '无法识别', // 扫码失败
  scanType: 1, // 单次扫描还是多次扫描
  parentParams: {}, // 上一个页面传递过来的参数
});

onLoad((params) => {
  const parentParams = params;
  data.parentParams = parentParams;
  const pages = getCurrentPages(); // getCurrentPages() 函数用于获取当前页面栈的实例
  const page = pages[pages.length - 1];
  // #ifdef APP-PLUS
  plus.navigator.setFullscreen(true); // 设置应用是否全屏显示
  const currentWebview = page.$getAppWebview(); // $getAppWebview() 可以得到当前webview的对象实例，从而实现对 webview 更强大的控制。
  createBarcode(currentWebview); // 创建二维码窗口
  createView(currentWebview); // 创建界面
  // #endif
});

// 从相册中选择图片
const galleryImg = () => {
  plus.gallery.pick(
    function (path) {
      scanImg(path); // 成功选择
    },
    function (e) {
      // 用户取消选择
      uni.showToast({
        title: '取消选择',
        icon: 'none',
        mask: true,
      });
      barcode.start(); // 开始扫码识别
    },
    {
      filter: 'image',
    },
  );
};

// 从图片中扫码识别
const scanImg = (path) => {
  plus.barcode.scan(
    path,
    function (type, result) {
      onmarked(type, result);
    },
    function (e) {
      uni.showToast({
        title: '无法识别',
        icon: 'none',
        mask: true,
      });
      barcode.start(); // 识别失败后ios会卡住，重启扫码
    },
  );
};

// 扫码成功回调
const onmarked = (type, result) => {
  let text = '未知: ';
  const { scanType } = data;
  const { parentParams } = data;
  switch (type) {
    case plus.barcode.QR:
      text = 'QR: ';
      break;
    case plus.barcode.EAN13:
      text = 'EAN13: ';
      break;
    case plus.barcode.EAN8:
      text = 'EAN8: ';
      break;
  }
  // 这里自己处理成功后的逻辑
  // plus.navigator.setFullscreen(false); //关闭全屏显示

  // const pages = getCurrentPages();
  // const prevPage = pages[pages.length - 2]; //上一个页面
  // prevPage.$vm.scanResultHandle({
  //   result: result, //发送数据,
  //   scanType: scanType, // 单次还是多次扫码
  //   parentParams: parentParams, // 上个页面传递过来的参数
  // });

  // if (scanType == 1) {
  //   barcode.close();
  // }

  // uni.navigateBack({
  //   delta: 1, //返回到上一页
  // });
  try {
    const resObj = JSON.parse(result);
    if (resObj.type) {
      plus.navigator.setFullscreen(false); // 关闭全屏显示
      switch (resObj.type) {
        // page跳转到对应的value
        case 'page':
          uni.redirectTo({
            url: resObj.value,
          });
          break;
        case 'content':
          console.log(resObj.value);
          break;
        default:
          uni.showModal({
            title: '提示',
            content: '未知类型的二维码',
            showCancel: false,
            success: ({ confirm, cancel }) => {
              barcode.start(); // 开始扫码识别
            },
          });
      }
      return;
    }
  } catch (error) {
    console.log(error);
  }

  // 判断扫码符不符合规则
  if (result.indexOf('pm_need_id') == 0) {
    const id = result.replace('pm_need_id', '');
    // 这里自己处理成功后的逻辑
    plus.navigator.setFullscreen(false); // 关闭全屏显示
    uni.redirectTo({
      url: `/pages/pm/requirement/detail?id=${id}`,
    });
  } else if (result.indexOf('pm_scan') == 0) {
    const s = result.replace('pm_scan', '');

    /**
     *  const j = {
          id: form.id,
          taskCode: form.taskCode,
          demandCode: form.demandCode,
          page: '/pages/pm/task/detail',
        };
     */
    const o = JSON.parse(s);
    // 这里自己处理成功后的逻辑
    plus.navigator.setFullscreen(false); // 关闭全屏显示
    uni.redirectTo({
      // url: '/pages/pm/requirement/detail?id=' + id,
      url: `${o.page}?params=${s}`,
    });
  } else if (result.indexOf('TA') === 0 || result.indexOf('SA') === 0) {
    getInfoBarCode(result).then((res) => {
      if (res.code === 0) {
        uni.redirectTo({
          url: `/pages/pm/assay-report/form?t=${result.indexOf('TA') === 0 ? 'qcMiddleReport' : 'qcExoticReport'}&checkCode=${result}`,
        });
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
      }
    });
  } else {
    uni.showModal({
      title: '提示',
      content: '请扫描正确单据二维码',
      showCancel: false,
      success: ({ confirm, cancel }) => {
        barcode.start(); // 开始扫码识别
      },
    });
    //
  }
};

// 创建二维码窗口
const createBarcode = (currentWebview) => {
  // 创建扫码识别控件对象
  /**
				 * plus.barcode.QR, plus.barcode.EAN13, plus.barcode.EAN8, plus
					.barcode.AZTEC, plus.barcode.DATAMATRIX, plus.barcode.UPCA, plus.barcode.UPCE, plus.barcode
					.CODABAR, plus.barcode.CODE39, plus.barcode.CODE93, plus.barcode.CODE128, plus.barcode.ITF,
					plus.barcode.PDF417,

				 * */
  barcode = plus.barcode.create('barcode', [plus.barcode.CODE128, plus.barcode.QR], {
    top: '0',
    left: '0',
    width: '100%',
    height: '100%',
    scanbarColor: '#1DA7FF',
    position: 'static',
    frameColor: '#1DA7FF',
  });
  barcode.onmarked = onmarked; // 扫码成功回调
  barcode.setFlash(data.flash); // 操作闪光灯
  currentWebview.append(barcode); // 把扫码控件添加到页面
  barcode.start(); // 开始扫码识别
};

// 创建操作按钮及tips
const createView = (currentWebview) => {
  // nativeObj管理系统原生对象。
  // 创建返回原生按钮
  const backView = new plus.nativeObj.View(
    'backView',
    {
      top: '50px',
      left: '0px',
      height: '40px',
      width: '40px',
    },
    [
      {
        tag: 'img',
        id: 'backBar',
        src: 'static/backBar.png',
        position: {
          top: '10px',
          left: '5px',
          width: '35px',
          height: '35px',
        },
      },
    ],
  );
  // 创建打开相册按钮
  const albumView = new plus.nativeObj.View(
    'albumView',
    {
      top: '50px',
      left: '78%',
      height: '40px',
      width: '70px',
    },
    [
      {
        tag: 'font',
        id: 'openAlbum',
        text: data.album,
        textStyles: {
          size: '18px',
          color: '#ffffff',
        },
        position: {
          top: '10px',
          left: '10px',
          width: '70px',
          height: '40px',
        },
      },
    ],
  );
  // 创建打开手电筒的按钮
  const scanBarView = new plus.nativeObj.View(
    'scanBarView',
    {
      top: '65%',
      left: '40%',
      height: '10%',
      width: '20%',
    },
    [
      {
        tag: 'img',
        id: 'scanBar',
        src: 'static/scanBar.png',
        position: {
          width: '28%',
          left: '36%',
          height: '30%',
        },
      },
      {
        tag: 'font',
        id: 'font',
        text: data.light,
        textStyles: {
          size: '10px',
          color: '#ffffff',
        },
        position: {
          top: '5px',
          width: '80%',
          left: '10%',
        },
      },
    ],
  );

  // 创建文本内容
  const content = new plus.nativeObj.View(
    'content',
    {
      top: '50px',
      left: '0px',
      height: '100%',
      width: '100%',
    },
    [
      {
        tag: 'font',
        id: 'scanTitle',
        text: data.title,
        textStyles: {
          size: '18px',
          color: '#ffffff',
        },
        position: {
          top: '10px',
          left: '0px',
          width: '100%',
          height: '40px',
        },
      },
      {
        tag: 'font',
        id: 'scanTips',
        text: data.tips,
        textStyles: {
          size: '14px',
          color: '#ffffff',
          whiteSpace: 'normal',
        },
        position: {
          top: '90px',
          left: '10%',
          width: '80%',
          height: 'wrap_content',
        },
      },
    ],
  );

  const sBtns = new plus.nativeObj.View(
    'sBtns',
    {
      top: '73%',
      left: '30%',
      height: '8%',
      width: '40%',
    },
    [
      {
        tag: 'rect',
        id: 's-btns',
        color: '#ffa19e',
        rectStyles: {
          radius: '6px',
        },
        position: {
          width: '100%',
          left: '0',
          height: '100%',
          top: '0%',
        },
      },
      {
        tag: 'font',
        id: 's-btn-font',
        text: '单次扫描',
        textStyles: {
          size: '10px',
          color: '#ffffff',
        },
        position: {
          top: '0',
          width: '80%',
          left: 'auto',
          height: '100%',
        },
      },
    ],
  );

  const mBtns = new plus.nativeObj.View(
    'mBtns',
    {
      top: '85%',
      left: '30%',
      height: '8%',
      width: '40%',
    },
    [
      {
        tag: 'rect',
        id: 'm-btns',
        color: '#ffa19e',
        rectStyles: {
          radius: '6px',
        },
        position: {
          width: '100%',
          left: '0',
          height: '100%',
          top: '0%',
        },
      },
      {
        tag: 'font',
        id: 'm-btn-font',
        text: '多次扫描',
        textStyles: {
          size: '10px',
          color: '#ffffff',
        },
        position: {
          width: '80%',
          left: 'auto',
          height: '100%',
        },
      },
    ],
  );

  backView.interceptTouchEvent(true); // 是否拦截View控件的触屏事件
  scanBarView.interceptTouchEvent(true);
  currentWebview.append(content); // 添加内容到页面
  currentWebview.append(scanBarView);
  currentWebview.append(backView);
  // currentWebview.append(albumView);
  // currentWebview.append(sBtns);
  // currentWebview.append(mBtns);

  backView.addEventListener(
    'click',
    function (e) {
      // 给返回按钮添加事件监听
      uni.navigateBack({
        delta: 1, // 返回上一级
      });
      barcode.close(); // 关闭扫码
      plus.navigator.setFullscreen(false); // 关闭全屏显示
    },
    false,
  );
  albumView.addEventListener(
    'click',
    function (e) {
      // 给打开相册按钮添加事件监听
      galleryImg();
    },
    false,
  );
  scanBarView.addEventListener(
    'click',
    function (e) {
      // 点亮手电筒事件控制
      data.flash = !data.flash;
      if (data.flash) {
        scanBarView.draw([
          {
            tag: 'img',
            id: 'scanBar',
            src: 'static/yellow-scanBar.png',
            position: {
              width: '28%',
              left: '36%',
              height: '30%',
            },
          },
          {
            tag: 'font',
            id: 'font',
            text: data.light,
            textStyles: {
              size: '10px',
              color: '#ffffff',
            },
            position: {
              top: '5px',
              width: '80%',
              left: '10%',
            },
          },
        ]);
      } else {
        scanBarView.draw([
          {
            tag: 'img',
            id: 'scanBar',
            src: 'static/scanBar.png',
            position: {
              width: '28%',
              left: '36%',
              height: '30%',
            },
          },
          {
            tag: 'font',
            id: 'font',
            text: data.light,
            textStyles: {
              size: '10px',
              color: '#ffffff',
            },
            position: {
              top: '5px',
              width: '80%',
              left: '10%',
            },
          },
        ]);
      }
      if (barcode) {
        barcode.setFlash(data.flash);
      }
    },
    false,
  );

  sBtns.addEventListener(
    'click',
    function (e) {
      scanSorMHandle(1, sBtns, mBtns);
    },
    false,
  );
  mBtns.addEventListener(
    'click',
    function (e) {
      scanSorMHandle(2, sBtns, mBtns);
    },
    false,
  );
};

const onBackPress = () => {
  // #ifdef APP-PLUS
  // 返回时退出全屏
  barcode.close();
  plus.navigator.setFullscreen(false);
  // #endif
};

const onUnload = () => {
  plus.navigator.setFullscreen(false);
};

// 点击单次还是多次扫码
const scanSorMHandle = (type, sBtns, mBtns) => {
  // type 1 单次 2 多次
  const selectColor = '#FF0000';
  const primayColor = '#ffa19e';
  data.scanType = type;

  sBtns.draw([
    {
      tag: 'rect',
      id: 's-btns',
      color: type == 1 ? selectColor : primayColor,
      rectStyles: {
        radius: '6px',
      },
      position: {
        width: '100%',
        left: '0',
        height: '100%',
        top: '0%',
      },
    },
    {
      tag: 'font',
      id: 's-btn-font',
      text: '单次扫描',
      textStyles: {
        size: '10px',
        color: '#ffffff',
      },
      position: {
        top: '0',
        width: '80%',
        left: 'auto',
        height: '100%',
      },
    },
  ]);

  mBtns.draw([
    {
      tag: 'rect',
      id: 'm-btns',
      color: type == 2 ? selectColor : primayColor,
      rectStyles: {
        radius: '6px',
      },
      position: {
        width: '100%',
        left: '0',
        height: '100%',
        top: '0%',
      },
    },
    {
      tag: 'font',
      id: 'm-btn-font',
      text: '多次扫描',
      textStyles: {
        size: '10px',
        color: '#ffffff',
      },
      position: {
        width: '80%',
        left: 'auto',
        height: '100%',
      },
    },
  ]);
};
</script>

<style scoped></style>
